<template>
<div>
  <div class="top">
    <el-image src="./static/img/title.png" fit="contain" style="width: 300px;align-self: flex-start"></el-image>
    <el-menu @select="handleSelect" default-active="1" style="width: 700px" mode="horizontal" active-text-color="#ff9900">
      <el-menu-item index="1" route="/">首页</el-menu-item>
      <el-menu-item index="2">我的工作台</el-menu-item>
      <el-menu-item index="3">关于我们</el-menu-item>
    </el-menu>
    <el-link style="color: chocolate" href="http://localhost:8080/#/login" v-if="!user">亲，请登录</el-link>
    <span v-if="user">欢迎您</span>
  </div>
  <div  class="research">
    <el-input prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
    <el-button style="background-color: chocolate;color: white">搜索</el-button>
  </div>
  <el-table
    stripe
    :data="trolleyData"
    style="max-width:1080px;margin: 0 auto"
    ref = 'trolleyTable'
    @selection-change="handlerSelectionChange"
  >
    <el-table-column
      type="selection">
    </el-table-column>
    <el-table-column
      label="序号">
      <template v-slot="scope">
        <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="goodsName"
      label="商品名称">
    </el-table-column>
    <el-table-column
      prop="goodsPic"
      label="商品图片">
      <template v-slot="scope">
        <img :src="scope.row.goodsPic" alt="" style="width: 100px;height: 100px"/>
      </template>
    </el-table-column>
    <el-table-column
      prop="goodsNum"
      label="数量">
    </el-table-column>
    <el-table-column
      prop="shopName"
      label="店铺名称">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="addName"
        label="收货人姓名"></el-table-column>
        <el-table-column
          prop="address"
          label="收货人地址"
          width="150"></el-table-column>
          <el-table-column
            prop="addPhone"
            label="收货人电话"
            width="150"
          ></el-table-column>
    </el-table-column>
    <el-table-column
      prop="options"
      label="操作">
      <template v-slot="scope">
        <el-button
          size="mini"
          type="warning"
          @click="buy(scope.$index, scope.row)"
        >
          下单
        </el-button>
        <el-button
          size="mini"
          type="primary"
          @click="change(scope.$index, scope.row)"
        >修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="delete(scope.$index, scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination" style="margin-top:20px;text-align:center;">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,prev, sizes, pager, next,jumper"
      :current-page.sync="pageParams.pageNum"
      :page-size="pageParams.pageSize"
      :page-sizes="[10,20,50,100]"
      :total="pageParams.total">
    </el-pagination>
  </div>
  <el-button size="small" style="margin-top: 10px"
             type="primary"
             @click = "buyMany"
             :disabled="this.selectItems.length===0">
    批量下单
  </el-button>
  <el-button size="small" style="margin-top: 10px"
             type="primary"
             @click = "deleteMany"
             :disabled="this.selectItems.length===0">
    批量删除
  </el-button>
  <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
    <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
    <el-form  :rules="rules" ref="trolleyForm" label-width="80px" :model="trolleyForm">
      <el-form-item label="仓库名称" prop="name">
        <el-input type="text" v-model="trolleyForm.name"></el-input>
      </el-form-item>
      <el-form-item label="仓库地点" prop="position">
        <el-select v-model="trolleyForm.position" placeholder="请选择地址信息">
          <el-option label="上海" value="上海"></el-option>
          <el-option label="北京" value="北京"></el-option>
          <el-option label="广州" value="广州"></el-option>
          <el-option label="兰州" value="兰州"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="submit">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "Trolley",
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
  },
  data(){
    return{
      user:'',
      trolleyData:[
        {
          goodsName:'商品名称',
          goodsPic:'https://img13.360buyimg.com/babel/s320x320_jfs/t1/222913/2/16074/117106/626bce27E4062e9a0/9450097464b68a7c.jpg',
          goodsNum:1,
          price:5,
          totalPrice:5,
          shopName:'店铺名称',
          addName:'收货人姓名',
          address:'收货人地址',
          addPhone:'收货人电话'
        },
        {
          goodsName:'商品名称',
          goodsPic:"https://img13.360buyimg.com/babel/s320x320_jfs/t1/222913/2/16074/117106/626bce27E4062e9a0/9450097464b68a7c.jpg",
          goodsNum:1,
          price:5,
          totalPrice:5,
          shopName:'店铺名称',
          addName:'收货人姓名',
          address:'收货人地址',
          addPhone:'收货人电话'
        },
        {
          goodsName:'商品名称',
          goodsPic:"https://img13.360buyimg.com/babel/s320x320_jfs/t1/222913/2/16074/117106/626bce27E4062e9a0/9450097464b68a7c.jpg",
          goodsNum:1,
          price:5,
          totalPrice:5,
          shopName:'店铺名称',
          addName:'收货人姓名',
          address:'收货人地址',
          addPhone:'收货人电话'
        }
      ],
      selectItems:[],
      trolleyForm: {
        name: '',
        position: '',
        sdate: '',
        edate: '',
        size:0,
        price:0
      },
      dialogFormVisible:false,
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods:{
    handleSelect(index)
    {
      if(index==='1')
      {
        this.$router.push("/")
      }else if(index==='2')
      {
        if(this.user)
        {
          let identity = this.user.identity;
          if(identity==='1')
          {
            this.$router.push("/admin");
          }
          else if(identity==='2')
          {
            this.$router.push("/home");
          }else
          {
            this.$router.push("/cvo");
          }
        }else
        {
          this.$router.push("/login")
        }

      }else
      {
        this.dialogVisible = true;
      }
    },
    handlerSelectionChange(val){
      this.selectItems = val;
      console.log(val);
    },
    handleSizeChange(val) {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
    },
    buy(index,row)
    {
      this.$router.push("/buy");
    },
    change()
    {

    },
  }
}
</script>

<style scoped>
.top{
  padding: 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.research
{
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}
</style>
